<template>
  <div>
    <div id="container" style="width: 100%; height: calc(100vh - 100px)"></div>
    <div id="info"></div>
  </div>
</template>

<script>

var content = [
  "<div style='font-size: 14px; color: red; width: 200px; height: 50px'>这是信息窗口</div>"
];
//点标记显示内容

export default {
  name: "Map",
  mounted() {
    // 创建地图实例
    var map = new AMap.Map("container", {
      zoom: 13,
      resizeEnable: true,
    })


    var infoWindow = new AMap.InfoWindow({
      anchor: 'top-right',
      content: content.join("<br>")  //传入 dom 对象，或者 html 字符串
    });

    var clickHandler = function (e) {
      console.log('您在[ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ]的位置点击了地图！');
      infoWindow.open(map, [126.685649, 45.779939]);
    };
    const marker = new AMap.Marker({
      position: position,
      content: markerContent, //将 html 传给 content
      offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
    });
    const markerContent = `<div class="custom-content-marker">
    <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">
    <div class="close-btn" onclick="clearMarker()">X</div>
    </div>`
    marker.on('click', clickHandler);
    // 将创建的点标记添加到已有的地图示例
    map.add(marker);


    // path 是驾车导航的起、途径和终点，最多支持16个途经点
    var path = []

    path.push([126.656681, 45.795415])
    path.push([126.682553, 45.771883])
    path.push([126.702603, 45.791997])

    map.plugin('AMap.DragRoute', function () {
      var route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE)
      // 查询导航路径并开启拖拽导航
      route.search()
    })

    map.plugin('AMap.ToolBar',function(){
      var toolbar = new AMap.ToolBar(); //缩放工具条实例化
      map.addControl(toolbar); //添加控件
    });

    map.plugin('AMap.Scale',function(){
      var bmScale = new AMap.Scale();
      map.addControl(bmScale); //添加控件
    });
    map.plugin('AMap.ControlBar',function(){
      var toolbar = new AMap.ControlBar(); //缩放工具条实例化
      map.addControl(toolbar); //添加控件
    });
    map.plugin('AMap.Geolocation',function(){
      var toolbar = new AMap.Geolocation(); //缩放工具条实例化
      map.addControl(toolbar); //添加控件
    });
    map.plugin('AMap.HawkEye',function(){
      var toolbar = new AMap.HawkEye(); //缩放工具条实例化
      map.addControl(toolbar); //添加控件
    });
    map.plugin('AMap.MapType',function(){
      var toolbar = new AMap.MapType(); //缩放工具条实例化
      map.addControl(toolbar); //添加控件
    });



    const position = new AMap.LngLat(116.397428, 39.90923); //Marker 经纬度


    var polyLine = new AMap.Polyline({
      path: path,
      strokeWeight: 5,
      borderWeight: 5, // 线条宽度，默认为 1
      strokeStyle: "solid",
      strokeColor: '#DC143C', // 线条颜色
      lineJoin: 'round' // 折线拐点连接处样式
    })
    map.add(polyLine)



    // 实例化城市查询类
    map.plugin('AMap.Geolocation', function () {
      var geolocation = new AMap.Geolocation({
        // 是否使用高精度定位，默认：true
        enableHighAccuracy: true,
        // 设置定位超时时间，默认：无穷大
        timeout: 10000,
        // 定位按钮的停靠位置的偏移量
        offset: [10, 20],
        //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        zoomToAccuracy: true,
        //  定位按钮的排放位置,  RB表示右下
        position: 'RB'
      })

      geolocation.getCurrentPosition(function (status, result) {
        if (status == 'complete') {
          onComplete(result)
        } else {
          onError(result)
        }
      });
      function clearMarker() {
        map.remove(marker); //清除 marker
      }
      document.querySelector(".close-btn").onclick = clearMarker; //绑定点击事件



      function onComplete(data) {
        // data是具体的定位信息
        console.log(data)
      }

      function onError(data) {
        // 定位出错
        console.error(data)
      }

    })

  }
}
</script>

<style scoped>
.custom-content-marker {
  position: relative;
  width: 25px;
  height: 34px;
}

.custom-content-marker img {
  width: 100%;
  height: 100%;
}

.custom-content-marker .close-btn {
  position: absolute;
  top: -6px;
  right: -8px;
  width: 15px;
  height: 15px;
  font-size: 12px;
  background: #ccc;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 15px;
  box-shadow: -1px 1px 1px rgba(10, 10, 10, .2);
}

.custom-content-marker .close-btn:hover{
  background: #666;
}
</style>
